<!--
 * @Author: vera_min vera_min@163.com
 * @Date: 2025-07-20 21:21:52
 * @LastEditors: vera_min vera_min@163.com
 * @LastEditTime: 2025-07-22 22:32:35
 * @FilePath: /mail_project_destop/src/components/EmailContent/account.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <el-popover
      placement="bottom"
      popper-class="custom-popover"
      trigger="click"
      style="word-break: keep-all;"
    >
      <div class="content">
        <div class="auto">
          {{props.email}}
        </div>
        <div>
          <i class="iconfont icon-copy copy" @click="handlerCopy" />
        </div>
      </div>
      <template #reference>
        {{props.emailName || props.email}}
      </template>
    </el-popover>
</template>
<script lang="ts" setup>
import { defineProps } from 'vue';
import commonFunction from '/@/utils/commonFunction';
const { copyText } = commonFunction();

const props = defineProps({
  email: {
    type: String,
    default: '',
  },
  emailName: {
    type: String,
    default: '',
  }
});

const handlerCopy = () => {
  const str = props.emailName ?  `${props.emailName}   <${props.email}>` : `<${props.email}>`;
  copyText(str);
};
</script>
<style lang="scss" scoped>
.content {
  display: flex;
  align-items: center;
}

.copy {
  cursor: pointer;
  margin-left: 10px;
}

.auto {
  flex: 1;
}
</style>  
<style>
.custom-popover {
  min-width: 200px !important;
  max-width: 500px !important;
  width: auto!important;
}
</style>